<template>
	<view>
		<u-navbar :back-icon-name="backIconName" :is-back="false" :background="background">
			<view class="d-flex a-center">
				<image src="../../static/images/promotion/backtrack.png.png" mode="" class="backtrack ml-2" @click="backtrack_img"></image>
				<view class="ml-2 font-32">编辑促销商品</view>
			</view>		
		</u-navbar>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2  mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="border-bottom clazz d-flex j-sb a-center">
						<view class="white-space">商品名称</view>
						<view class="d-flex a-center j-center mx-3">
							<text class="mr ellipsis-1">{{pro_detail.goods_name}}</text>
						</view>
					</view>
					<view class=" clazz  d-flex j-sb a-center">
						<view class="">商品价格</view>
						<view class="d-flex a-center j-end mr-3 w-50">
							<text class="ellipsis-1">{{pro_detail.formatted_shop_price?pro_detail.formatted_shop_price:pro_detail.shop_price}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="rounded-20 m-2 pl-3  bg-white" >
				<view class="d-flex j-sb pr-3 py-3 border-bottom" @click="initiate">
					<view class="">开始时间</view>
					<view class="d-flex j-center a-center">
						<view class="text-right mr-1" >{{initiate_time}}</view>
					</view>
				</view>
				<view class="d-flex j-sb pr-3 py-3" @click="conclude">
					<view class="">结束时间</view>
					<view class="d-flex j-center a-center">
						<view class="text-right mr-1">{{conclude_time}}</view>
					</view>
				</view>		
			</view>
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class=" a-center  py-3 d-flex j-sb clazz">
						<view class="">促销价格</view>
						<view class="mr-3">
							<input type="digit"  class="text-right" placeholder="输入商品价格" v-model="prcie"  placeholder-class="mr-1 d-flex j-end" @input="pro_price" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 返回提示 -->
		<u-popup v-model="popup_show" class="logOutPopup" mode='center' border-radius="20">
				<view class="popup_wd">
					<view class="py-5 text-center bg-white">你的信息还未保存，返回后将会丢失</view>
					<view class="d-flex  bg-light-secondary border-top">
						<view class="flex-1 py-2 text-center border-right text-danger" @click="Off">取消</view>
						<view class="flex-1 py-2 text-center text-danger" @click="Confirm">确定返回</view>
					</view>	
				</view>
		</u-popup>
		
		<view class="footer">
			
		</view>
		<view class="d-flex sub j-sb bg-white p-2 w-100 position-fixed bottom-0">
			<button type="warn" class="dele" @click="sub_dele">删除</button>
			<button type="warn" class="rele" @click="sub_rele">保存</button>
		</view>	
		<u-toast ref="uToast" />
		<!-- 开始 -->
		<u-picker v-model="initiate_show" mode="time" @confirm="initiate_confirm"></u-picker>
		<!-- 结束 -->
		<u-picker v-model="conclude_show" mode="time" @confirm="conclude_confirm"></u-picker>
		<!-- 退出弹出层 -->
		<uni-popup ref="popup" type="center" class="logOutPopup">
			<view class="popup_wd">
				<view class="py-2 bg-danger text-white text-center">提示</view>
				<view class="py-5 text-center bg-white">是否确定要删除？</view>
				<view class="d-flex  bg-light-secondary border-top">
					<view class="flex-1 py-2 text-center border-right" @click="Off_dele">取消</view>
					<view class="flex-1 py-2 text-center" @click="Confirm_dele">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#ffffff',
				},
				goods_id:'', // 商品ID
				pro_detail:"", // 详情
				prcie:"", // 价格
				initiate_show:false,// 开始 开关
				initiate_time:"", // 开始时间
				conclude_show:false, // 结束开关
				conclude_time:"", // 结束时间
				popup_show:false,
				client:"",
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			// 开始时间
			initiate(){
				this.initiate_show=true
			},
			// 结束时间
			conclude(){
				this.conclude_show=true
			},
			// 开始
			initiate_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()>new Date(this.conclude_time).getTime()){
					this.$refs.uToast.show({
						title: '开始日期不能晚于结束日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.initiate_time=time
					console.log(1)
				}
			},
			// 结束
			conclude_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()<new Date(this.initiate_time).getTime()){
					this.$refs.uToast.show({
						title: '结束日期不能早于开始日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.conclude_time=time
					console.log(2)
				}
			},
			pro_price(e){
				this.prcie=e.detail.value
			},
			// 删除
			sub_dele(){
				 this.$refs.popup.open()
			},
			Off_dele(){
				this.$refs.popup.close()
			},
			Confirm_dele(){
				this.$H.post("admin/promotion/delete",{
					goods_id:this.goods_id,
				}).then(res=>{
					console.log(res)
					uni.navigateBack({
						delta:1
					})
				})
			},
			// 保存
			sub_rele(){
				this.$H.post("admin/promotion/update",{
					goods_id:this.goods_id,
					promote_price:this.prcie.replace("￥",''),
					start_time:this.initiate_time.toString(),
					end_time:this.conclude_time.toString()
				}).then(res=>{
					console.log(res)
					this.$refs.uToast.show({
						title: '编辑促销商品成功！',
						type: 'success',
						duration:1000,
						callback:()=>{
							uni.navigateBack({
								delta:1
							})
						}
					})
					
				})
			},
			// 返回
			backtrack_img(){
				this.popup_show=true
			},
			// 返回
			Confirm(){
				uni.navigateBack({
					delta:1
				})
			},
			// 取消弹框
			Off(){
				this.popup_show=false
			}
		},
		onLoad(e) {
			console.log(uni.getStorageSync("client"))
			this.goods_id=e.goods_id
			this.$H.post("admin/promotion/detail",{
				goods_id:e.goods_id
			}).then(res=>{
				this.pro_detail=res.data
				this.prcie=res.data.formatted_promote_price
				
				this.u_loadmore=false 
				this.initiate_time=/\d{4}-\d{1,2}-\d{1,2}/g.exec(this.pro_detail.formatted_promote_start_date)
				this.conclude_time=/\d{4}-\d{1,2}-\d{1,2}/g.exec(this.pro_detail.formatted_promote_end_date)
			})
		}
	}
</script>

<style>
	.logOutPopup /deep/ .popup_wd{
		width: 600upx;
	}
	.sub{
		z-index: 111;
	}
	.sub /deep/ .dele{
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		border-radius: 50upx;
		width: 45%;
		color: #000000;
	}
	.sub /deep/ .dele::after{
		border: none;
		color: #000000;
	}
	.sub /deep/ .rele{
		width: 45%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
</style>
